<template>
	<div class="movielist">
		<div class="nooo" v-if="movieList.movies==null||movieList.movies.length<=0">敬请期待!</div>
		<div class="dediv3">
			<div class="swiper-container movie-list-b">
				<div class="swiper-wrapper">

					<div class="swiper-slide" v-for="i in movieList.movies" :key="i.id">
					
						<img  @click="toBuyTicket(i.id, i.nm)" class="movie-img-b" :src="i.img| setWH('96.140')" id="movielistimg" alt="">
			          
			</div>
		
				</div>
			</div>
		</div>
		<div class="dediv4">
			<div v-for="(item,index) in movieList.movies" :key="item.id">
				<div v-if="index === tabIndex">
					<p class="dep6"><span  @click="toBuyTicket(item.id, item.nm)" id="namelist">{{item.desc}}</span> <span class="dep6span">9.0分</span></p>
					<p style="color:#999" >期待值：{{item.wish}}</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Swiper from 'swiper';
	 import 'swiper/swiper-bundle.css'
	export default {
		props: ['movieList'],
		data() {
			return {
				tabIndex:0
			}
		},
		mounted() {
			const that = this
			const mySwiper = new Swiper('.movie-list-b', {
				slidesPerView: 3,
				spaceBetween: 30,
				centeredSlides: true,
				observer: true,
				on: {
					slideChangeTransitionEnd: function() {
						that.selec(this.activeIndex)
					},
				}
			});
		},
		methods: {
			selec(index) {
				this.tabIndex = index
				this.$emit('changeValue', 'currentFilm', this.tabIndex)
			},
			   toBuyTicket(id, nm) {
      this.$router.push({
        path: "/buyticket",
        query: { id, nm },
      });
    },
		}
	}
</script>

<style>

	.nooo{
   color:rgb(200, 228, 43);
	text-align: center;
position: absolute;
top: 50%;
left:50%;
z-index: 200;
transform: translateX(-50%);
	}

	.dediv3 {
		padding: 10px;
	
	}

	.movie-list-b {
		height: 40vw;
	}
	.movie-img-b {
		height: 33.3vw;
		width: 24vw;
		border-radius: 0.5vw;
	}

	.swiper-slide {
		text-align: center;
		font-size: 2.4vw;
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		transition: 300ms;
		transform: scale(0.9);
	}

	.swiper-slide-active,
	.swiper-slide-duplicate-active {
		transform: scale(1.1);
	}

	.movie-title {
		margin-top: 4vw;
	}

	.dediv4 {
		padding-top: 15px;
		padding-bottom: 10px;
		margin-bottom: 10px;
		text-align: center;
		font-size: 13px;
		color:white;
		border-bottom: 1px solid #302e2e;
	}

	.dep6 {
		margin-bottom: 8px;
	}

	.dep6span {
		color: #f73171;
	}
	
</style>
